<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>异步加载地图</title>
  <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
  <!-- <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script> -->
  <!-- <script src="https://unpkg.com/gcoord/dist/gcoord.js"></script> -->
  <script src="https://unpkg.com/gcoord/dist/gcoord.global.prod.js"></script>
  <!-- <script src="./common/util.js"></script> -->

</head>

<body>
  <div id="container"></div>
  <script>
    var map = null;
    // const gcoord = require('gcoord');
    function onApiLoaded() {
      map = new AMap.Map('container', {
        center: [117.10709087356923, 36.67459186502283],
        zoom: 15
      });
      map.on("click", e => {
        console.log(e);
      })
      addWMSLayer();
    }

    // 切片转经度
    function tile2lon(x, z) {
      return (x / Math.pow(2, z) * 360 - 180);
    }

    // 切片转纬度
    function tile2lat(y, z) {
      var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
      return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
    }

    function objToParams(obj) {
      return Object.keys(obj).map(function (key) {
        return "".concat(encodeURIComponent(key), "=").concat(encodeURIComponent(obj[key]));
      }).join('&');
    }

    function addWMSLayer() {

      var resolutions = []
      for (var i = 0; i < 19; i++) {
        resolutions[i] = Math.pow(2, 18 - i);
      }

      var tileLayer = new AMap.TileLayer({
        tileSize: 256,
        tileUrl: function (x, y, z) {
          console.log(x, y, z);
          let xmin = tile2lon(x, z);
          let xmax = tile2lon(x + 1, z);
          let ymin = tile2lat(y + 1, z);
          let ymax = tile2lat(y, z);

          // 转换对应坐标
          let t1 = gcoord.transform([xmin, ymin], gcoord.EPSG4326, gcoord.GCJ02);
          let t2 = gcoord.transform([xmax, ymax], gcoord.EPSG4326, gcoord.GCJ02);

          // 查询对象
          let url = 'http://47.100.34.182:8203/geoserver/JiNanQSPhaseII/wms?';
          // let url = 'https://223.75.59.215:30112/arcgis/services/changsha/changsha/MapServer/WMSServer?';

          let params = {
            service: "WMS",
            version: "1.3.0",
            transparent: true,
            request: "GetMap",
            layers: "JiNanQSPhaseII:JiNanQSPhaseII",
            // layers: "0",
            width: 256,
            height: 256,
            srs: "EPSG:4326",
            format: "image/png",
            bbox: [t1[0], t1[1], t2[0], t2[1]].join(',')
          };

          // let wms = new AMap.TileLayer.WMS({
          //   // https://rate.leitechina.com.cn:30112/arcgis/rest/services/changsha/南川河/MapServer
          //   // url: 'https://223.75.59.215:30112/arcgis/services/changsha/changsha/MapServer/WMSServer',
          //   // url: 'https://rate.leitechina.com.cn:30112/arcgis/services/changsha/changsha/MapServer/WMSServer',
          //   url: item.severUrl,
          //   blend: false,
          //   tileSize: 256,
          //   params: { 'LAYERS': '0', VERSION: '1.3.0', STYLES: 'default', FORMAT: 'image/png' }
          // });


          // 构建查询字符串
          let str = objToParams(params);
          console.log(url + str);

          return url + str;
        },
        zIndex: 10
      })
      map.add(tileLayer);
    }

    var url = 'https://webapi.amap.com/maps?v=1.4.15&key=b07420cb1cf83ae2be531b9bfec38c86&callback=onApiLoaded';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
  </script>
</body>

</html>